<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
  	<title>Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="description" content="">

   <!-- styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/prettify.css" rel="stylesheet">
    <link href="css/tm_docs.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <link href="css/ie.css" rel="stylesheet">
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

  <body data-spy="scroll" data-target=".bs-docs-sidebar">


<!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top" id="advanced">
      <span class="trigger"><strong></strong><em></em></span>
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="scaffolding.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="home">
                <a href="../index.html"><img src="img/tm/tm_home.png" alt=""></a>
              </li>
              <li class="divider-vertical"></li>
              <li >
                <a href="scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="components.html">Components</a>
              </li>
              <li class="">
                <a href="javascript.html">Javascript</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="dropdown active">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">TM add-ons <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="../404.html">Pages</a>
                    <ul>  
                      <li><a href="under_construction.html">Under Construction</a></li>
                      <li><a href="intro.html">Intro Page</a></li>
                      <li class=""><a href="../404.html">404 page</a></li>
                    </ul>
                  </li>
                  <li class="active"><a href="portfolio.html">Portfolio</a></li>
                  <li><a href="slider.html">Slider</a></li>
                  <li><a href="social_media.html">Social and Media<br> Sharing</a></li>
                  <li><a href="css3.html">CSS3 Tricks</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
	<h1>Portfolio Page</h1>
  </div>
</header>

  <div class="container">


<section id="columns">
		<div class="row">
			<div class="span12">
				<div class="page-header">
				    <h1>Portfolio Layouts</h1>
				</div>
				<div class="">
					<ul class="nav nav-tabs nav_portfolio">
						<li class="tm_portfolio3_capt active"><a href="#tab1" data-toggle="tab"><span></span><small>Three Columns with label</small></a></li>
						<li class="tm_portfolio3"><a href="#tab2" data-toggle="tab"><span></span><small>Three Columns</small></a></li>
						<li class="tm_portfolio4_capt"><a href="#tab3" data-toggle="tab"><span></span><small>Four Columns with label</small></a></li>
						<li class="tm_portfolio4"><a href="#tab4" data-toggle="tab"><span></span><small>Four Columns</small></a></li>
						<li class="tm_portfolio2_capt"><a href="#tab5" data-toggle="tab"><span></span><small>Two Columns with label</small></a></li>
						<li class="tm_portfolio2"><a href="#tab6" data-toggle="tab"><span></span><small>Two Columns</small></a></li>
						<li class="tm_portfolio1"><a href="#tab7" data-toggle="tab"><span></span><small>One column with label</small></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="tab-content">
<!-- Three with Caption Columns Begin -->

		<div class="tab-pane active" id="tab1">
			<div class="">
				<div class="row">
					<div class="span4">
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_1.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_2.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_3.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
					</div>
					<div class="span4">
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_4.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_5.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_6.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
					</div>
					<div class="span4">
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_7.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_8.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
							<div class="thumb-pad">
								<div class="thumbnail">
									<img src="img/stock_images/700x430_1.jpg" alt="">
									<div class="caption">
										<h5>Thumbnail label</h5>
										<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
										<a href="#" class="btn">Read More</a>
									</div>
								</div>
							</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">
&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Three with Caption Columns End -->
<!-- Three Columns Begin -->
		<div class="tab-pane" id="tab2">
			<div class="">
				<div class="row">
					<div class="span4">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_8.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
						</div>
					</div>
					<div class="span4">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_6.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a>
						</div>
					</div>
					<div class="span4">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_7.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">
&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_2.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_2.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span4"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_2.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Three Columns End -->
<!-- Four with Caption Columns Begin -->
		<div class="tab-pane" id="tab3">
			<div class="container">
				<div class="row">
					<div class="span3">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_1.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_5.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_8.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_4.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_2.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_6.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_5.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_2.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_3.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_7.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_1.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_7.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_4.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_8.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_4.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_5.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">
&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Four with Caption Columns End -->
<!-- Four Columns Begin -->
		<div class="tab-pane" id="tab4">
			<div class="container">
				<div class="row">
					<div class="span3">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_8.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_6.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_7.jpg" alt=""></a>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_8.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
					</div>
					<div class="span3">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_6.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_7.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_1.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_1.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_1.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span3"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_1.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Four Columns End -->
<!-- Two Columns with Caption Begin -->
		<div class="tab-pane" id="tab5">
			<div class="container">
				<div class="row">
					<div class="span6">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_2.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_3.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_4.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
					<div class="span6">
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_1.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_5.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
						<div class="thumb-pad">
							<div class="thumbnail">
								<img src="img/stock_images/700x430_6.jpg" alt="">
								<div class="caption">
									<h5>Thumbnail label</h5>
									<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p>
									<a href="#" class="btn">Read More</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span6"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span6"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;div class="thumbnail"&gt;
					&lt;img src="image_1.jpg" alt=""&gt;
					&lt;div class="caption"&gt;
					&lt;h5&gt;Thumbnail label&lt;/h5&gt;
					&lt;p&gt;Text.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Two Columns with Caption End -->
<!-- Two Columns Begin -->
		<div class="tab-pane" id="tab6">
			<div class="container">
				<div class="row">
					<div class="span6">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
						</div>
					</div>
					<div class="span6">
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
						</div>
						<div class="thumb-pad">
							<a href="#" class="thumbnail"><img src="img/stock_images/700x430_6.jpg" alt=""></a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span6"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_2.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		&lt;div class="span6"&gt;
			&lt;div class="thumb-pad"&gt;
				&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_2.jpg" alt=""&gt;&lt;/a&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Two Columns End -->
<!-- Full-width Begin -->
		<div class="tab-pane" id="tab7">
			<div class="container">
				<div class="row">
					<div class="span12">
						<div class="row thumb-pad">
							<div class="span4"><a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a></div>
							<div class="span8">
								<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
								<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
								<a href="#" class="btn">Read More</a>
							</div>
						</div>
						<div class="row thumb-pad">
							<div class="span4"><a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a></div>
							<div class="span8">
								<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
								<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
								<a href="#" class="btn">Read More</a>
							</div>
						</div>
						<div class="row thumb-pad">
							<div class="span8">
								<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
								<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
								<div class=" alignright"><a href="#" class="btn">Read More</a></div>
							</div>
							<div class="span4"><a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a></div>
						</div>
						<div class="row thumb-pad">
							<div class="span8">
								<p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p>
								<p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
								<div class=" alignright"><a href="#" class="btn">Read More</a></div>
							</div>
							<div class="span4"><a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a></div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="span12">
<pre class="prettyprint linenums">&lt;div class="container"&gt;
	&lt;div class="row"&gt;
		&lt;div class="span12"&gt;
			&lt;div class="row thumb-pad"&gt;
				&lt;div class="span4"&gt;&lt;a href="#" class="thumbnail"&gt;&lt;img src="image_1.jpg" alt=""&gt;&lt;/a&gt;&lt;/div&gt;
				&lt;div class="span8"&gt;
					&lt;p&gt;Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.&lt;/p&gt;
					&lt;p&gt;Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis.&lt;/p&gt;
					&lt;a href="#" class="btn"&gt;Read More&lt;/a&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
					</div>
				</div>
			</div>
		</div>
<!-- Full-width End --></div>
</section>
<section id="isotope">
				<div class="row">
					<div class="span12">
						<div class="page-header">
						    <h1>Isotope Plugin <small>An exquisite jQuery plugin for magical layouts</small></h1>
						</div>
<div id="options" class="clearfix">
      <ul id="filters" class="pagination option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
        <li><a href="#filter" data-option-value=".prod">products</a></li>
        <li><a href="#filter" data-option-value=".serv">services</a></li>
      </ul>


  </div> <!-- #options -->
  
  <div id="container" class="clearfix">
   
    <div class="element transition prod" data-category="transition">
		<a href="#" class="thumbnail"><img src="img/stock_images/700x430_1.jpg" alt=""></a>
    </div>
      
    <div class="element serv" data-category="metalloid">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_2.jpg" alt=""></a>
    </div>
     
    <div class="element post-transition prod" data-category="post-transition">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_3.jpg" alt=""></a>
    </div>
   
    <div class="element transition serv" data-category="transition">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_4.jpg" alt=""></a>
    </div>
     
    <div class="element alkaline-earth prod" data-category="alkaline-earth">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_5.jpg" alt=""></a>
    </div>
   
    <div class="element transition serv" data-category="transition">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_6.jpg" alt=""></a>
    </div>
    
    <div class="element post-transition prod" data-category="post-transition">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_7.jpg" alt=""></a>
    </div>
    
    <div class="element serv" data-category="metalloid">
    	<a href="#" class="thumbnail"><img src="img/stock_images/700x430_8.jpg" alt=""></a>
    </div>
 
					</div>
				</div>
			</div>

	<div style="clear:both;"></div>
	<div class="row">
		<div class="span12">
			<h3>Basic structure</h3>
			<p>Isotope works on a container element with a group of similar child items.</p>
			<pre class="prettyprint linenums">
&lt;div id="container"&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  ...
&lt;/div&gt;</pre>
			<h3>Initialization</h3>
<pre class="prettyprint linenums">$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});</pre>
			<h3>Essential CSS</h3>
			<p>Add these styles to your CSS for filtering, animation with CSS transitions, and adding items.</p>
<pre class="prettyprint linenums">/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}</pre>
<p><a href="http://isotope.metafizzy.co">Isotope</a> by David DeSandro / Metafizzy</p>
		</div>
	</div>
			</section>

  </div>
   <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="footer-links">
          <li><a href="http://blog.getbootstrap.com">Blog</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
        </ul>
      </div>
    </footer>



    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/prettify.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script src="js/bootstrap-affix.js"></script>
    <script src="js/application.js"></script>
    <script src="js/jquery.cookie.js"></script>
  	<script src="js/jquery.isotope.min.js"></script>
	<script>
	$(function(){
	  
	  var $container = $('#container');

	  $container.isotope({
	    itemSelector : '.element'
	  });
	  
	  
	  var $optionSets = $('#options .option-set'),
	      $optionLinks = $optionSets.find('a');

	  $optionLinks.click(function(){
	    var $this = $(this);
	    // don't proceed if already selected
	    if ( $this.hasClass('selected') ) {
	      return false;
	    }
	    var $optionSet = $this.parents('.option-set');
	    $optionSet.find('.selected').removeClass('selected');
	    $this.addClass('selected');

	    // make option object dynamically, i.e. { filter: '.my-filter-class' }
	    var options = {},
	        key = $optionSet.attr('data-option-key'),
	        value = $this.attr('data-option-value');
	    // parse 'false' as false boolean
	    value = value === 'false' ? false : value;
	    options[ key ] = value;
	    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
	      // changes in layout modes need extra logic
	      changeLayoutMode( $this, options )
	    } else {
	      // otherwise, apply new options
	      $container.isotope( options );
	    }
	    
	    return false;
	  });

	  
	});
	</script>
</body>
</html>